<!-- 首页-->
<template>
  <div class="">
    <div class="" style="position: relative">
      <!-- 头部导航栏 -->
      <el-container class="home-container animated fadeIn">
        <HeaderNavsBar class=""> </HeaderNavsBar>
        <el-main class="home-banner animated zoomIn">
          <div class="blog-title">
            <h1>首页</h1>
          </div>
          <div>
            <vue-typed-js
              class="desc"
              :strings="typingTexts"
              :loop="true"
              :startDelay="300"
              :typeSpeed="100"
              :backSpeed="50"
            >
              <span class="typing"></span>
            </vue-typed-js>
          </div>
        </el-main>
      </el-container>

      <!-- <div class="home-container">
       
        <div class="home-banner">
          <h1>首页</h1>
        </div>
      </div> -->
    </div>

    <div class="col-12">
      <el-container>
        <!--内容主体 -->
        <el-main>
          <IndexMain></IndexMain>
        </el-main>
        <!-- 底部 -->
        <el-footer>
          <IndexFooter></IndexFooter>
        </el-footer>
      </el-container>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import VueTypedJs from "vue-typed-js";
import HeaderNavsBar from "@/components/tools/HeaderNavsBar.vue";
import IndexFooter from "@/components/layout/IndexFooter.vue";
import IndexMain from "@/components/layout/IndexMain.vue";
Vue.use(VueTypedJs);

export default {
  setup() {},
  components: {
    HeaderNavsBar,
    IndexFooter,
    IndexMain,
  },
  data() {
    return {
      typingTexts: [
        "欢迎来到zBlog",
        "在这里你可以畅所欲言",
        "分享你所学所知的一切",
        "与大家一起构建zBlog吧",
      ],
      audio: [
        {
          name: "响喜乱舞（Cover：MARiA）",
          artist: "泠鸢yousa",
          url: "",
          cover: 'https://p1.music.126.net/AUGVPQ_rVrngDH9ocQrn3Q==/109951163613037822.jpg?param=300y300', // prettier-ignore
          lrc: "",
        },
        {
          name: "东西（Cover：林俊呈）",
          artist: "纳豆",
          src: "",
          cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
          lrc: "",
        },
        {
          name: "啵唧",
          artist: "Hanser",
          url: "",
          cover: 'https://p1.music.126.net/K0-IPcIQ9QFvA0jXTBqoWQ==/109951163636756693.jpg?param=300y300', // prettier-ignore
          lrc: "",
        },
      ],
    };
  },
  mounted() {},
  destroyed() {},
  methods: {},
};
</script>
<style scoped lang="scss">
html {
  width: 100%;
  // overflow: hidden;
}
.downward {
  position: absolute;
  bottom: 0;
}
.navBarWrap {
  position: fixed;
  right: 0;
  top: 0px;
  z-index: 100000;
}
.home-container {
  width: 100%;
  height: 100vh;
  background: url("https://map-zblog.oss-cn-guangzhou.aliyuncs.com/backgroundImg/psc.png")
    no-repeat 50% / cover fixed;
  // background-size: 100% auto;
  // background-attachment: fixed;
}
.home-banner {
  margin: 0 auto;
  .blog-title {
    margin-top: 30vh;
    text-align: center;
    color: #eee;
    font-size: 28px;
  }
}

a {
  text-decoration: none;
}
li {
  list-style: none;
}
.el-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.header-float {
  cursor: default !important;
}
.typing {
  color: #eee;
  margin-top: 10px;
  text-align: center;
  text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.5);
  line-height: 1.5;
  font-size: 20px;
}
</style>
